<template>
  <div class="app-container">
    <!-- 顶部导航 -->
    <el-header class="header page-title">
      <div class="header-left">
        <h2>用电成本分析</h2>
      </div>
      <div class="header-right">
        <el-radio-group v-model="timeRange" size="small">
          <el-radio-button label="day">日</el-radio-button>
          <el-radio-button label="week">周</el-radio-button>
          <el-radio-button label="month">月</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
        />
      </div>
    </el-header>

    <el-container class="main-container">
      <el-main>
        <!-- 成本统计卡片 -->
        <el-row :gutter="20" class="statistics">
          <el-col :span="6" v-for="stat in costStatistics" :key="stat.title">
            <el-card shadow="hover" :body-style="{ padding: '20px' }">
              <div class="stat-card">
                <div class="stat-info">
                  <div class="stat-title">{{ stat.title }}</div>
                  <div class="stat-value" :class="stat.colorClass">
                    {{ stat.prefix }}{{ stat.value }}
                    <span class="stat-unit">{{ stat.unit }}</span>
                  </div>
                  <div class="stat-compare" :class="stat.trend">
                    <i
                      :class="[
                        'fa',
                        stat.trend === 'up' ? 'fa-arrow-up' : 'fa-arrow-down',
                      ]"
                    ></i>
                    {{ stat.compare }}
                  </div>
                </div>
                <i
                  :class="['fa', stat.icon, stat.colorClass]"
                  style="font-size: 32px"
                ></i>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 用电负荷和费用分析 -->
        <el-row :gutter="20">
          <el-col :span="16">
            <el-card class="chart-card">
              <template #header>
                <span>用电负荷曲线</span>
                <div class="chart-controls">
                  <el-radio-group v-model="loadType" size="small">
                    <el-radio-button label="realtime">实时负荷</el-radio-button>
                    <el-radio-button label="max">最大负荷</el-radio-button>
                  </el-radio-group>
                </div>
              </template>
              <div class="load-chart">
                <div class="time-markers">
                  <div class="marker peak">
                    <i class="fa fa-clock-o"></i> 峰时段
                    <span>09:00-12:00</span>
                  </div>
                  <div class="marker valley">
                    <i class="fa fa-clock-o"></i> 谷时段
                    <span>00:00-06:00</span>
                  </div>
                </div>
                <div class="chart-container" style="height: 300px">
                  <!-- 此处集成实际图表组件 -->
                  <div class="chart-placeholder">负荷曲线图表</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="tariff-card">
              <template #header>
                <span>电费组成</span>
                <el-tooltip content="查看电费计算规则" placement="top">
                  <i class="fa fa-question-circle"></i>
                </el-tooltip>
              </template>
              <div class="tariff-chart">
                <!-- 此处放置饼图 -->
                <div class="chart-placeholder">电费构成饼图</div>
              </div>
              <div class="tariff-list">
                <div
                  v-for="item in tariffItems"
                  :key="item.type"
                  class="tariff-item"
                >
                  <div class="item-info">
                    <span class="type">{{ item.type }}</span>
                    <span class="value">¥{{ item.value }}</span>
                  </div>
                  <el-progress
                    :percentage="item.percentage"
                    :color="item.color"
                    :show-text="false"
                  />
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 分时电价和用电记录 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="price-card">
              <template #header>
                <span>分时电价</span>
                <el-tag type="success">当前处于平段时间</el-tag>
              </template>
              <div class="price-table">
                <el-table :data="priceRates" border style="width: 100%">
                  <el-table-column prop="period" label="时段" />
                  <el-table-column prop="timeRange" label="时间范围" />
                  <el-table-column prop="rate" label="电价(元/kWh)">
                    <template #default="scope">
                      <span :class="scope.row.type">{{ scope.row.rate }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="tips-card">
              <template #header>
                <span>节能建议</span>
                <el-button type="text">
                  <i class="fa fa-lightbulb-o"></i> 更多建议
                </el-button>
              </template>
              <div class="tips-list">
                <div
                  v-for="(tip, index) in energyTips"
                  :key="index"
                  class="tip-item"
                >
                  <i class="fa fa-check-circle"></i>
                  <span>{{ tip }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 用电记录表格 -->
        <el-card class="table-card">
          <template #header>
            <span>用电记录明细</span>
            <div class="table-controls">
              <el-button-group size="small">
                <el-button>
                  <i class="fa fa-file-pdf-o"></i> PDF报告
                </el-button>
                <el-button type="primary">
                  <i class="fa fa-download"></i> 导出Excel
                </el-button>
              </el-button-group>
            </div>
          </template>
          <el-table :data="electricityRecords" style="width: 100%" border>
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="timeSlot" label="时段" width="120" />
            <el-table-column prop="location" label="区域" width="120" />
            <el-table-column prop="usage" label="用电量(kWh)" width="120" />
            <el-table-column prop="rate" label="电价(元/kWh)" width="120" />
            <el-table-column prop="cost" label="金额(元)" width="120" />
            <el-table-column prop="loadFactor" label="负荷率" width="120">
              <template #default="scope">
                <el-progress
                  :percentage="scope.row.loadFactor"
                  :color="getLoadFactorColor(scope.row.loadFactor)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === '已结算' ? 'success' : 'warning'"
                >
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next"
              :total="100"
              :page-sizes="[10, 20, 50, 100]"
            />
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";

const dateRange = ref([]);
const timeRange = ref("day");
const loadType = ref("realtime");

// 成本统计数据
const costStatistics = [
  {
    title: "本月电费",
    value: "42,568",
    prefix: "¥",
    unit: "元",
    icon: "fa-bolt",
    colorClass: "text-primary",
    trend: "up",
    compare: "较上月 +12.5%",
  },
  {
    title: "用电量",
    value: "45,689",
    prefix: "",
    unit: "kWh",
    icon: "fa-flash",
    colorClass: "text-success",
    trend: "up",
    compare: "较上月 +8.3%",
  },
  {
    title: "最大需量",
    value: "286.5",
    prefix: "",
    unit: "kW",
    icon: "fa-line-chart",
    colorClass: "text-warning",
    trend: "down",
    compare: "较上月 -5.2%",
  },
  {
    title: "",
    value: "0.93",
    prefix: "¥",
    unit: "/kWh",
    icon: "fa-calculator",
    colorClass: "text-info",
    trend: "up",
    compare: "较上月 +3.8%",
  },
];

// 电费组成数据
const tariffItems = [
  {
    type: "峰时电费",
    value: "15,689",
    percentage: 35,
    color: "#409EFF",
  },
  {
    type: "平时电费",
    value: "20,456",
    percentage: 45,
    color: "#67C23A",
  },
  {
    type: "谷时电费",
    value: "6,423",
    percentage: 20,
    color: "#909399",
  },
];

// 分时电价数据
const priceRates = [
  {
    period: "峰时段",
    timeRange: "09:00-12:00, 17:00-22:00",
    rate: "1.2",
    type: "peak-rate",
  },
  {
    period: "平时段",
    timeRange: "06:00-09:00, 12:00-17:00",
    rate: "0.9",
    type: "normal-rate",
  },
  {
    period: "谷时段",
    timeRange: "22:00-次日06:00",
    rate: "0.5",
    type: "valley-rate",
  },
];

// 节能建议
const energyTips = [
  "建议在谷时段开启大功率设备，可节约30%电费",
  "当前空调温度偏低，建议调整至26℃以上",
  "检测到B区照明系统存在待机损耗，建议及时关闭",
  "建议对老旧设备进行节能改造，预计可节约15%用电量",
];

// 用电记录数据
const electricityRecords = [
  {
    date: "2024-03-01",
    timeSlot: "峰时段",
    location: "A区",
    usage: 256.8,
    rate: 1.2,
    cost: 308.16,
    loadFactor: 85,
    status: "已结算",
  },
  {
    date: "2024-03-01",
    timeSlot: "平时段",
    location: "B区",
    usage: 345.2,
    rate: 0.9,
    cost: 310.68,
    loadFactor: 65,
    status: "未结算",
  },
];

// 获取负荷率颜色
const getLoadFactorColor = (value) => {
  if (value >= 80) return "#67C23A";
  if (value >= 60) return "#E6A23C";
  return "#F56C6C";
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.statistics {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-info .stat-title {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.stat-info .stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 8px;
}

.stat-unit {
  font-size: 14px;
  margin-left: 4px;
  color: var(--el-text-color-secondary);
}

.stat-compare {
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-compare.up {
  color: var(--el-color-danger);
}

.stat-compare.down {
  color: var(--el-color-success);
}

.chart-card,
.tariff-card,
.price-card,
.tips-card,
.table-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.load-chart {
  padding: 16px;
}

.time-markers {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.marker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 4px;
}

.marker.peak {
  background-color: rgba(245, 108, 108, 0.1);
  color: var(--el-color-danger);
}

.marker.valley {
  background-color: rgba(103, 194, 58, 0.1);
  color: var(--el-color-success);
}

.marker span {
  color: var(--el-text-color-regular);
}

.chart-container {
  width: 100%;
  height: 100%;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--el-bg-color-page);
  color: var(--el-text-color-secondary);
  border-radius: 4px;
}

.tariff-chart {
  height: 200px;
  margin-bottom: 20px;
}

.tariff-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tariff-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-info .type {
  color: var(--el-text-color-secondary);
}

.item-info .value {
  font-weight: 500;
}

.price-table {
  margin: 16px 0;
}

.peak-rate {
  color: var(--el-color-danger);
  font-weight: bold;
}

.normal-rate {
  color: var(--el-color-warning);
  font-weight: bold;
}

.valley-rate {
  color: var(--el-color-success);
  font-weight: bold;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background-color: var(--el-bg-color-page);
  border-radius: 4px;
}

.tip-item i {
  color: var(--el-color-success);
  margin-top: 2px;
}

.table-controls {
  display: flex;
  gap: 12px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 主题色定义 */
.text-primary {
  color: var(--el-color-primary);
}

.text-success {
  color: var(--el-color-success);
}

.text-warning {
  color: var(--el-color-warning);
}

.text-info {
  color: var(--el-color-info);
}

/* 响应式优化 */
@media (max-width: 1400px) {
  .el-col-6 {
    width: 50%;
  }
}

@media (max-width: 992px) {
  .el-col-6,
  .el-col-8,
  .el-col-12,
  .el-col-16 {
    width: 100%;
  }

  .header-right {
    flex-direction: column;
    gap: 8px;
  }

  .statistics {
    margin-bottom: 10px;
  }

  .stat-card {
    margin-bottom: 10px;
  }
}
</style>
